import React, { PureComponent } from 'react';
import Month from '../components/calendar/components/month';
import Year from '../components/calendar/components/year';
import Calendar from '../components/calendar';
import styles from './IndexPage.less';
import moment from 'moment';
class IndexPage extends PureComponent {
  constructor(){
    super();
    this.state = {
      value: undefined,
    }
  }
  onCahnge = (value) => {
    this.setState({ value });
  };
  render(){
    return(
      <div style={{ marginLeft: '30px'}}>
        {/* 无意义函数，无需理会 */} {_renderTipsOne()}
        <div style={{overflow: 'hidden'}}>
          <h1>基础组件-月</h1>
          <Month month={new Date()} className={styles.Month}/>
          {/* 无意义函数，无需理会 */} {_renderTipsTwo()}
        </div>
        <div style={{overflow: 'hidden'}}>
          <h1>基础组件-年</h1>
          <Year className={styles.Month}/>
          {/* 无意义函数，无需理会 */} {_renderTipsThree()}
        </div>
        <div style={{overflow: 'hidden'}}>
          <h1>组件-Calendar</h1>
          <div style={{ width: '500px', float:'left'}}>
            <Calendar className={styles.Calendar} onChange={this.onCahnge}/>
          </div>
          {/* 无意义函数，无需理会 */} { _renderTipsFour()}
        </div>
      </div>
    )
  }
}

function _renderTipsOne(){
  return(
    <div style={{ width: '500px'}}>
      <h1>思路</h1>
      <p style={{textIndent: '2rem'}}>在使用antd中各种日期组件后，总结出其相同点，所有日期组件之间最相似的部分是“日期面板”的展示，特别是月面板，其他的内容各不相同。比如切换年月面板、
        年份与月份，有的提供header,footer接口，datePicker就有选择时间段的效果、移动端没有年面板（虽然可以切换年份）。
      </p>
      <p style={{textIndent: '2rem'}}>所以我就想着，把展示部分独立出来，做成独立的组件，再根据
        需求的不同，再次封装。比如可以结合月和年面板封装成Calendar组件又或者可以使用两个月面板封装成一个datePicker组件，也可以根据移动端展示的特点，封装成适用于
        移动端的Calendar等等。</p>
      <p style={{textIndent: '2rem'}}>
        接下来我会一般讲解每个组件的接口，以及设计的思路。
      </p>
    </div>
  );
}

function _renderTipsTwo(){
  return(
    <ol style={{ overflow: 'hidden', width: '500px', display: 'block' }}>
      <li>month: | 类型：string/Date/moment | default: | 输入一个日期给这个接口，然后展示该月份。月组件是没有切换日期的功能的，都是根据外部传进来的日期来展示。</li>
      <li>isStartFromSunday: | 类型：boolean | default: false | 如果为true,要重新给weekText传值。在日历起始星期中，有以周一和周日为第一天的。默认是以周一为第一天，如果要修改为以周日为第一天，要传对应的weekText</li>
      <li>renderFullDate: | 类型：function(moment) | 月组件表格的行和列是固定的，而可以修改以及实现各种效果的是表格单元格的内容，也就是这个接口的作用。外部传入一个函数，并返回渲染相关的内容。而月组件内部在调用这个函数时，会给函数传一个moment,moment就是当前要渲染的日期。要实现其他效果也是依赖于这个函数，可以在返回的内容上绑定事件或者修改各种效果等等 | </li>
      <li>renderWeekHead: | 类型：function(weekText) | 这个函数与上面的功能一样，只是内部调用传进来的函数时，给函数传的是下面weekText的内容。 | </li>
      <li>weekText: | 类型：array | default: ['一','二','三','四','五','六','日'] | 可以根据要求修改成对应的头，比如可以换成英文的</li>
      <li>className: |简介：Month组件最外层div的className | </li>
    </ol>
  );
}

function _renderTipsThree(){
  return(
    <ol style={{ overflow: 'hidden',width: '500px', display: 'block' }}>
      <li>renderFullMonth: | 类型：function({`{month, monthText}`}) | 这个接口的设计思路与上面月面板的renderFullDate类似，只是调用时是内部传进一个对象，对象有渲染的月份值和相关的文本| </li>
      <li>yearText: | 类型：[] | 提供给上一个接口渲染时的文本，内部默认使用（1月，2月...),可以修改 | </li>
      <li>className: |简介：Year组件最外层div的className | </li>
    </ol>
  );
}

function _renderTipsFour(){
  return(
    <ol style={{ overflow: 'hidden',width: '500px', display: 'block' }}>
      <li>disabledDate: 类型:function(date)</li>
      <li>mode: 类型: string | 初始展示的页面</li>
      <li>value: 类型: moment | 默认展示当前日期</li>
      <li>onChange: 类型: function(date) | 点击选择日期回调</li>
      <li>Calendar是对月组件与年组件的一个简单封装，基于两个组件的框架，利用renderFullDate接口，实现hover、点击事件、选中后样式、标注今天、禁用事件的效果。如果有需要，可以进一步的改进，利用点击事件或长按事件触发
        日页面、或者报餐请假之类的功能。
      </li>
    </ol>
  );
}
export default IndexPage;
